<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue css动画</title>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!--
        v-if，v-show,还有动态组件控制组件显示和隐藏时，如果外层有transition标签，那么
        那么vue就会动态的给该dom动态的添加和删除类似上述的class类来起到过度的作用，从而起到动画的效果；
        -->
    <div class="app">
        <transition appear appear-active-class='animated fadeInLeft' enter-active-class='animated fadeInLeft v-enter-active' leave-active-class='animated fadeOutLeft v-leave-active'>
            <div v-if="show">Hello world</div>
        </transition>
        <button @click="handelclick">切换</button>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: ".app",
        data: {
            show: true
        },
        methods: {
            handelclick: function() {
                this.show = !this.show
            }
        }
    });
    </script>
</body>

</html>